<template>
  <view class="container">
    <scroll-view class="scroll-view" scroll-x :scroll-left="scrollLeft" @scroll="handleScroll" scroll-with-animation>
      <view class="item-container">
        <view class="item" v-for="(item, index) in list" :key="index" :id="'item'+index">
          <!-- 图片 -->
          <image v-if="activeIndex !== index || !item.video" class="content" :src="item.image" mode="aspectFill"
            @click="handleClick(index)" />
          <!-- 视频 -->
          <video v-if="activeIndex === index && item.video" class="content" :id="'video'+index" :src="item.video"
            :autoplay="false" controls show-center-play-btn objectFit="cover"
            @play="onPlay(index)" @pause="onPause(index)" @ended="onEnded(index)" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        scrollLeft: 0,
        activeIndex: -1, // 当前激活的视频索引
        itemWidth: 300, // 每个项目的宽度，根据实际样式调整
        screenWidth: 375, // 屏幕宽度
        currentVideoContext: null // 当前视频上下文
      }
    },
    mounted() {
      // 获取屏幕宽度
      uni.getSystemInfo({
        success: (res) => {
          this.screenWidth = res.windowWidth
        }
      })
    },
    methods: {
      handleScroll(e) {
        const scrollLeft = e.detail.scrollLeft
        // 计算当前应该激活的索引
        const newIndex = Math.round(scrollLeft / this.itemWidth)

        // 只有当索引变化时才更新
        if (newIndex !== this.activeIndex) {
          // 停止之前播放的视频
          this.stopCurrentVideo()

          this.activeIndex = newIndex
        }
      },
      onPlay(index) {
        // 保存当前视频上下文
        this.currentVideoContext = uni.createVideoContext('video' + index, this)
		this.currentVideoContext.requestFullScreen({
			direction: 0 // 90表示横屏，0表示竖屏
		  })
      },
      onPause(index) {
        if (this.currentVideoContext && this.activeIndex === index) {
          this.currentVideoContext = null
        }
      },
      onEnded(index) {
        if (this.currentVideoContext && this.activeIndex === index) {
          this.currentVideoContext = null
        }
      },
      handleClick(index) {
        // 点击图片时切换到对应位置并激活视频
        this.scrollLeft = index * this.itemWidth

        // 停止之前播放的视频
        this.stopCurrentVideo()

        this.activeIndex = index
      },
      // 停止当前播放的视频
      stopCurrentVideo() {
        if (this.currentVideoContext) {
          this.currentVideoContext.pause()
          this.currentVideoContext = null
        }
      },
      // 手动滑动到指定索引
      scrollToIndex(index) {
        if (index < 0 || index >= this.list.length) return

        // 停止之前播放的视频
        this.stopCurrentVideo()

        this.scrollLeft = index * this.itemWidth
        this.activeIndex = index
      }
    }
  }
</script>

<style scoped>
  /* 样式保持不变 */
  .container {
    width: 100%;
    overflow: hidden;
  }

  .scroll-view {
    width: 100%;
    white-space: nowrap;
  }

  .item-container {
    display: inline-block;
  }

  .item {
    display: inline-block;
    width: 533rpx;
    /* 单个项目的宽度，可根据需要调整 */
    height: 799rpx;
    /* 单个项目的高度，可根据需要调整 */
    margin-right: 36rpx;
    /* 项目之间的间距 */
  }

  .content {
    width: 100%;
    height: 100%;
    /* border-radius: 8px; */
  }

  /* 第一个项目左边距 */
  .item:first-child {
    margin-left: 15px;
  }

  /* 最后一个项目右边距 */
  .item:last-child {
    margin-right: 15px;
  }
</style>